<template>
  <el-submenu
    v-if="menu.children && menu.children.length > 0"
    :key="menu.categoryCode"
    :index="menu.categoryCode"
  >
    <template slot="title">
      <i
        v-if="menu.icon"
        :class="menu.icon"
      /><span slot="title">{{ menu.categoryName }}</span>
    </template>
    <category-menu
      v-for="(child, index) in menu.children"
      :key="index"
      :menu="child"
    />
  </el-submenu>
  <el-menu-item
    v-else
    :key="menu.categoryCode"
    :index="menu.categoryCode"
  >
    <i
      v-if="menu.icon"
      :class="menu.icon"
    /><span slot="title">{{ menu.categoryName }}</span>
  </el-menu-item>
</template>
<script>
export default {
  name: 'CategoryMenu',
  props: {
    menu: {
      type: Object,
      required: true
    }
  }
}
</script>
